<template>
    <div class="container">
        <!-- 面包屑导航 -->
        <bread-view>
            <bread-item :to="'/'">首页</bread-item>
            <transition name="bread">
              <bread-item :key="subcate && subcate.id">{{subcate&&subcate.name}}</bread-item>
            </transition>
        </bread-view>
        <!-- 轮播图 -->
        <div class="cateswiper">
            <swiper-view :slider="bannerlist"></swiper-view>
        </div>
        <!-- 全部子分类 -->
        <div class="sub-list">
        <h3>全部分类</h3>
        <ul v-if="subcate">
          <li v-for="i in subcate.children" :key="i.id">
            <a href="#">
              <!-- <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" > -->
              <img :src="i.picture" alt="">
              <p>{{i.name}}</p>
            </a>
          </li>
        </ul>
        </div>
        <!-- 子分类推荐数据 -->
        <div class="ref-goods" v-for="item in subList" :key="item.id">
          <div class="head">
            <h3>- {{item.name}} -</h3>
            <p class="tag">温暖柔软,品质之选</p>
            <XtxMore />
          </div>
          <div class="body">
            <GoodsItem v-for="it in item.goods" :key="it.id" :goods="it"/>
          </div>
        </div>
    </div>
</template>
 
<script>
import BreadItem from '../utils/Bread/BreadItem.vue'
import BreadView from '../utils/Bread/BreadView.vue'
import SwiperView from '../utils/SwiperView.vue'
import { getBanner } from '@/utils/api/homeapi'
import GoodsItem from '../category/GoodsItem.vue'
import { getTwoCate } from '@/utils/api/categoryapi'
export default {
    components: { BreadView, BreadItem, SwiperView, GoodsItem },
    data(){
        return{
            bannerlist:[],
            nowid:null,
            subList:[],
            nowname:null
        }
    },
    mounted(){
        this.setBannerList()
        // 获取地址栏的数据
        this.nowid=this.$route.query.id
        this.getTwoCatelist()
    },
    methods:{
        async setBannerList(){
            let res=await getBanner()
            // console.log(res);
            this.bannerlist=res.result
        },
        async getTwoCatelist(){
            let res=await getTwoCate(this.nowid)
            // console.log(res);
            this.subList=res.result.children
        },
    },
    computed:{
        subcate(){
            // console.log(this.$store.state.category.cate);
            let nowobj=this.$store.state.category.cate.find(item=>{
                return item.id==this.nowid
            })
            // console.log(nowobj,'nowobj');
            return nowobj
            
        }
    },
    watch:{
        $route:{
            handler(val){
                // console.log(val);
                this.nowid=val.query.id
            }
        },
        nowid(val){
            if(val){
                this.getTwoCatelist()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/variables.scss';
.cateswiper{
    width: 100%;
    height: 500px;
    img{
        height: 100%;
    }
}
h3 {
    font-size: 28px;
    color: #666;
    font-weight: normal;
    text-align: center;
    line-height: 100px;
  }
  .sub-list {
    margin-top: 20px;
    background-color: #fff;
    ul {
      display: flex;
      padding: 0 32px;
      flex-wrap: wrap;
      li {
        width: 168px;
        height: 160px;
        a {
          text-align: center;
          display: block;
          font-size: 16px;
          img {
            width: 100px;
            height: 100px;
          }
          p {
            line-height: 40px;
          }
          &:hover {
            color: $xtxColor;
          }
        }
      }
    }
  }
  .ref-goods {
    background-color: #fff;
    margin-top: 20px;
    position: relative;
    .head {
      .xtx-more {
        position: absolute;
        top: 20px;
        right: 20px;
      }
      .tag {
        text-align: center;
        color: #999;
        font-size: 20px;
        position: relative;
        top: -20px;
      }
    }
    .body {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: 0 65px 30px;
    }
  }
  .bread-enter,.bread-leave-to{
    opacity: 0;
    transform: translateX(-20px);
  }
  .bread-enter-to,.bread-leave{
    opacity: 1;
    transform: translateX(0);
  }
  .bread-enter-active{
    transition: all 0.3s;
  }
</style>